<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Search, Check } from '@element-plus/icons-vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { FolderOpened } from '@element-plus/icons-vue'
import MyIcon from '@/components/my-icon/index.vue'
import { getDepartmentList, getDepartmentSearch, postStaffIndex, getDepartmentLists, departmentList } from '@/api'
import dataCopyVue from '../wework/data copy.vue'
import { ElLoading } from 'element-plus'
import detail from './detail.vue'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
const detailMore = ref(null)

const showList = ()=>{
	table.value = false
}
const showDetail= (id)=>{
	console.log('sdfsdfdsf')
	table.value = true
	setTimeout(()=>{
		detailMore.value.show(id)
	},5)
}



const inputTwo = ref('')
const value = ref('')
const flag = ref(true)

//获取接口数据信息
const aothList = ref([])
const idList = ref(1)
const nowDepartmentId = ref(0)
const nowDepartmentText = ref('')
// 获取部门列表接口
const GroupNav = (id, name) => {
	console.log(id)
	console.log(name)
	departmentList({
		department_id: id ? id : '',
		department_name: name ? name : ''
	}).then((res) => {
		console.log(res)
		console.log(res.data)
		aothList.value = res.data
		nowDepartmentText.value = res.data[0].department_name
		// console.log(aothList)
		// data.daya = res.data
	})
}

// 部门列表搜索接口
// 显示隐藏搜索图标
const searchEnter1 = (e) => {
	console.log(e)
	if (e) {
		flag.value = false
		requestMenuList(e)
	} else {
		flag.value = true
	}
}
const menusData = ref([])
const inputOne = ref('')
const requestMenuList = (inputOne) => {
	// console.log(menusData.value)
	getDepartmentSearch({
		name: inputOne
	}).then((res) => {
		console.log(res)
		menusData.value = res.data
		// console.log(menusData)
		// data.daya = res.data
	})
}
//成员列表接口
const currentNav = ref([])
const dePartId = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const ChangeNavs = (name) => {
	console.log(nowDepartmentId.value)
	postStaffIndex({
		page: currentPage.value,
		size: pageSize.value,
		departmentid: nowDepartmentId.value,
		name: name ? name : ''
	}).then((res) => {
		console.log(res)
		currentNav.value = res.data.item
		console.log(currentNav)

		// emits('TestEmit', aothList.value)
	})
}

const deleteRow = (index) => {
	console.log(index)
}
const addperson = () => {
	console.log('添加成员')
}
// 点击显示树状下级内容
const handleNodeClick = (data, node) => {
	// node.expanded = !node.expanded;
	console.log(data, node)
	console.log(data.department_id)
	nowDepartmentId.value = data.department_id
	nowDepartmentText.value = data.department_name
	console.log('调用下级接口')
	ChangeNavs()
	// let dataproxy = JSON.parse(JSON.stringify(node))
	// console.log(dataproxy.name)
}
onMounted(() => {
	GroupNav()
	ChangeNavs() //成员列表
	getDepartmentListFun() //部门列表
})
// 点击显示树状下级内容
const loadNode = (node, resolve) => {
	console.log(node)
	var data = []
	console.log(node.data.department_id)
	if (node.data.department_id != undefined) {
		departmentList({ department_id: node.data.department_id }).then((res) => {
			console.log(res)
			let data = res.data
			// 前者item.参数名称为 prop中的规定的属性名称
			data.forEach((item) => {
				item.name = item.department_name
				item.id = item.department_id
			})
			resolve(data)
		})
	}
	resolve(data)
}
const nodeExpand = () => {
	console.log('触发三角控制')
}
// 搜索框输入内容搜索
// const inputEvent = (event) => {
// 	console.log(event)
// 	if (event == '') {
// 		// 发请求回到初始列表数据状态
// 		return
// 		console.log('搜索框没东西了，回复初始状态')
// 	}
// }
const searchEnter = (event) => {
	console.log(124)

	// 控制一下，如果用户没输入东西就不去搜索
	if (event.inputOne === '') {
		return
	} else {
		// 把input带着，发请求获取有关联的数据并呈现在页面中
		console.log('带着关键字交给后端搜索', event.inputOne)
	}
}

const searchEvent = (event) => {
	currentPage.value = 1
	console.log(nowDepartmentId)
	ChangeNavs(event)
}
const searchDepartment = (event) => {
	if (event == '') {
		aothList.value = []
		nowDepartmentId.value = 0
	}
	console.log(nowDepartmentId.value)
	console.log(event)
	GroupNav(nowDepartmentId.value, event)
}
//刷新目录数据
const loading = ref(false)
const refreshClick = (data) => {
	console.log('刷新目录')
	loading.value = true
	console.log('loading', loading.value)
	getDepartmentLists({
		id: data
	}).then((res) => {
		console.log(res)
		loading.value = false
		ElMessage({
			message: '同步成功',
			type: 'success'
		})
	})
	// loading.value = false
}

const searchChange = () => {
	console.log('发送请求')
}
// 获取部门列表
const getDepartmentListFun = (id) => {
	departmentList({
		department_id: id ? id : ''
	}).then((res) => {
		console.log(res)
	})
}
// 获取员工列表
// const getMemberListFun = (id) => {
// 	memberList({
// 		department_id: id ? id : 1,
// 		page: 1,
// 		size: 10
// 	}).then((res) => {
// 		console.log(res)
// 	})
// }
const options = [
	{
		value: 'Option1',
		label: '全部账号'
	},
	{
		value: 'Option2',
		label: '超级管理员'
	},
	{
		value: 'Option3',
		label: '管理员'
	},
	{
		value: 'Option4',
		label: '部门管理员'
	},
	{
		value: 'Option5',
		label: '普通员工'
	}
]
const props = ref()
const defaultProps = {
	//树形控件的属性绑定对象
	// children: aothList.value.haschildren,
	children: 'haschildren', //设置通过children属性展示子节点信息
	label: 'name' //通过label设置树形节点文本展示
}
</script>
<template>
	<div class="common-top">
		点击同步后员工将在企微端收到提醒，确认授权后才会显示到后台成员列表
	</div>
	<div class="common-main">
		<div class="common-main-left">
			<div class="left-top-input">
				<div class="left-top-input-left">
					<!-- 可搜索部门成员框 -->
					<el-input
						v-model="inputOne"
						class="w-50 m-2"
						placeholder="可搜索部门,成员标签"
						@keyup.enter.native="requestMenuList"
						@input="searchDepartment"
						size="large"
						clearable
					>
						<template #suffix>
							<el-icon class="el-input__icon" v-if="flag"><Search /></el-icon>
						</template>
					</el-input>
				</div>
				<el-icon
					:size="20"
					style="color: #7d8fab"
					v-loading.fullscreen.lock="loading"
					@submit.native.prevent
					@click="refreshClick"
				>
					<Refresh />
				</el-icon>
			</div>
			<div class="left-button">组织架构</div>
			<!-- <div class="addmember" @click="addperson">
				<MyIcon class="addmembercontent" name="AntDesignPlusSquare" />
				<span class="">添加成员</span>
			</div> -->
			<el-divider border-style="dashed" />
			<!-- 添加成员部分 -->
			<div class="treestyle" v-show="flag">
				<el-tree
					:data="aothList"
					node-key="department_id"
					:props="defaultProps"
					:load="loadNode"
					lazy
					@node-click="handleNodeClick"
				>
					<template #default="{ node, data }">
						<FolderOpened style="width: 16px; height: 16px; color: #47a7ff; margin-right: 2px" />
						<span class="custom-tree-node">
							<span>{{ data.department_name }}</span>
						</span>
					</template>
				</el-tree>
			</div>
			<!-- 当数据为空时显示此页面 -->
			<!-- <div class="treestyle" v-show="flag">没有搜索到部门或成员标签哦</div> -->
			<!-- 当后端返回数据存在时显示返回内容 -->
			<!-- <div class="treestyle" v-show="flag">
				<el-tree
					:data="aothList"
					node-key="id"
					:props="defaultProps"
					:load="loadNode"
					lazy
					@node-click="handleNodeClick"
				>
					<template #default="{ node, data }">
						<FolderOpened style="width: 16px; height: 16px; color: #47a7ff; margin-right: 2px" />
						<span class="custom-tree-node">
							<span>{{ data.name }}</span>
						</span>
					</template>
				</el-tree>
			</div> -->
		</div>
		<!-- right -->
		<div class="common-main-right">
			<el-scrollbar height="2000px">
				<div class="rightfather">
					<div class="right-child-top">{{ nowDepartmentText }}</div>
					<div class="right-child-header">
						<!-- <div>
							角色:
							<el-select v-model="value" clearable placeholder="全部账号">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div> -->
						<div class="queryComponent-container">
							<!-- <div class="queryComponent">
								<span>角色：</span>
								<el-select clearable placeholder="全部" class="component" size="large">
									<el-option label="123" value="123" />
								</el-select>
							</div> -->
							<div class="queryComponent">
								<span>搜索：</span>
								<el-input
									size="large"
									v-model="inputTwo"
									class="w-50 m-2 component"
									placeholder="可搜索成员"
									@input="searchEvent"
									@change="searchChange"
									:suffix-icon="Search"
									lazy
								/>
							</div>
						</div>
					</div>
					<!-- <div class="right-center">置灰成员未配置【基础版】席位，请配置后使用 <a href="www.baidu.com">去配置</a></div> -->
					<div class="right-bottom">
						<el-table
							:data="currentNav"
							stripe
							style="width: 100%; cursor: pointer"
							:header-cell-style="{
								color: '#5d5e65',
								fontSize: '14px',
								backgroundColor: '#F7F9FA',
								padding: '10px 0',
								fontWeight: '400'
							}"
							:cell-style="{ fontSize: '14px', padding: '20px 0' }"
						>
							<el-table-column prop="name" label="成员列表" width="230">
								<template #default="scope">
									<div style="display: flex">
										<img :src="scope.row.avatar" alt="" style="width: 30px; height: 30px" />
										<span style="padding-left: 10px; line-height: 30px"> {{ scope.row.name }} </span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="department" label="所属部门" />
							<!-- <el-table-column prop="wid" label="所管部门" />
							<el-table-column prop="role" label="角色" /> -->
							<el-table-column prop="type" label="外部联系人权限"> </el-table-column>
							<el-table-column prop="customer_number" label="客户量" />
							<el-table-column prop="status" label="授权状态" class-name="hah" width="150">
								<template #header>
									<div class="app-flex-left">
										<span class="">授权状态</span>
										<MyIcon class="question-icon" name="Question" />
									</div>
								</template>
								<template #default="scope">
									<div class="app-flex-left">
										<svg
											t="1662028291719"
											class="icon"
											viewBox="0 0 1024 1024"
											version="1.1"
											xmlns="http://www.w3.org/2000/svg"
											p-id="1410"
											width="16"
											height="16"
											v-show="scope.row.status == 1"
										>
											<path
												d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m238.933333 349.866666l-2.133333 2.133334-277.333333 277.333333c-10.666667 10.666667-29.866667 12.8-42.666667 2.133333L426.666667 704l-149.333334-149.333333c-12.8-12.8-12.8-32 0-44.8 10.666667-10.666667 29.866667-12.8 42.666667-2.133334l2.133333 2.133334 125.866667 125.866666 253.866667-253.866666c10.666667-10.666667 29.866667-12.8 42.666666-2.133334l2.133334 2.133334c12.8 12.8 12.8 32 4.266666 42.666666z"
												p-id="1411"
												fill="#52c41a"
											></path>
										</svg>
										<svg
											t="1662116086536"
											class="icon"
											viewBox="0 0 1024 1024"
											version="1.1"
											xmlns="http://www.w3.org/2000/svg"
											p-id="2381"
											width="16"
											height="16"
											v-show="scope.row.status == 2"
										>
											<path
												d="M511.8 63.3c-246.7 0-448.5 201.8-448.5 448.5s201.8 448.5 448.5 448.5 448.5-201.8 448.5-448.5S758.5 63.3 511.8 63.3z m214.3 603c15 15 15 42.4 0 57.3-7.5 7.5-17.4 12.5-29.9 12.5-10 0-22.4-5-29.9-12.5L521.8 579.1 377.3 723.6c-15 15-42.4 15-57.3 0s-15-42.4 0-57.3l144.5-144.5L320 377.3c-7.5-7.5-12.5-17.4-12.5-29.9 0-10 5-22.4 12.5-29.9 15-15 42.4-15 57.3 0L521.8 462l144.5-144.5c7.5-7.5 17.4-12.5 29.9-12.5 10 0 22.4 5 29.9 12.5s12.5 17.4 12.5 29.9c0 10-5 22.4-12.5 29.9L581.6 521.8l144.5 144.5z"
												p-id="2382"
												fill="#d81e06"
											></path>
										</svg>
										<span style="padding-left: 5px; line-height: 30px" v-show="scope.row.status == 1"> 已激活</span>
										<span style="padding-left: 5px; line-height: 30px" v-show="scope.row.status == 2"> 已禁用</span>
										<span style="padding-left: 5px; line-height: 30px" v-show="scope.row.status == 4"> 未激活</span>
										<span style="padding-left: 5px; line-height: 30px" v-show="scope.row.status == 5"> 退出企业</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="operation" align="right" label="操作" width="">
								<template #default="scope">
									<!-- <ul class="tableOperation"> -->
										<!-- <li>聊天记录</li>
										<li>管理权限</li> -->
										<!-- <li @click.prevent="deleteRow(scope.$index)" @click="table = true">成员详情</li> -->
										<span class="app-primary-font" @click="showDetail(scope.row.id)">成员详情</span>
									<!-- </ul> -->
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 右边栏弹出框 -->
					<el-drawer v-model="table" title="成员详情" direction="rtl" size="70%"
						>
						<detail style="margin-top: -20px;" ref="detailMore" @goBack="showList" />
					</el-drawer>
				</div>
			</el-scrollbar>
		</div>
	</div>
	<bottomCopyringht></bottomCopyringht>
</template>
<script lang="ts">
const table = ref(false)
</script>
<style scoped>
* {
	font-size: 14px;
}
.common-top {
	margin: 20px;
	background: #e6f0ff;
	border-radius: 2px;
	border: 1px solid #7db3f2;
	padding: 11px 19px;
	color: #023d81;
	font-size: 13px;
	line-height: 20px;
	margin-bottom: 16px;
}
.common-top a {
	text-decoration: none;
	margin-left: 15px;
	color: #1890ff;
}
.common-main {
	display: flex;
}

.common-main-left {
	margin: 0 0 0 20px;
	border-radius: 10px;
	width: 281px;
	height: 1000px;
	background-color: #ffffff;
}
.left-top-input {
	display: flex;
	margin: 15px 8px 0px 15px;
	align-items: center;
}
.left-top-input-left {
	margin-right: 10px;
	flex: 1;
}
.left-top-input-right {
}

.common-main-right {
	border-radius: 10px;
	margin: 0 20px 20px 10px;
	width: 100%;
	height: 1000px;
	background-color: #ffffff;
}
.left-button {
	width: 260px;
	height: 40px;
	text-align: center;
	margin: 20px 20px 10px 15px;
	color: #ffffff;
	line-height: 40px;
	background-color: #1890ff;
}
/* 添加成员css */
.addmember {
	display: flex;
	padding-left: 20px;
	text-indent: 10px;
	justify-content: flex-start;
	color: #595959;
}
.addmembercontent {
	margin-top: 5px;
	color: #9baebf;
}

.addicon {
	margin-top: 2px;
}
.treestyle {
	margin: 0 0 0 5px;
}
.treestyle span {
	font-size: 12px;
}
.el-divider--horizontal {
	margin: 10px 0;
	background: 0 0;
	border-top: 1px dashed #e8eaec;
}
/* right */
.rightfather {
	margin: 20px;
}
.right-child-top {
	margin-bottom: 20px;
	font-size: 16px;
	color: #333;
	font-weight: 600;
}
.right-child-header {
	display: flex;
	margin-bottom: 20px;
}
.header-search {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 30px;
}
.header-search-input {
	margin-left: 5px;
}
.right-center {
	margin: 20px 20px 20px 0;
	height: 40px;
	padding-left: 20px;
	line-height: 40px;
	background-color: #f1f9ff;
	color: #595959;
	display: flex;
	align-items: center;
}
.right-center svg {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	color: #1890ff;
}
.right-center a {
	text-decoration: none;
	margin-left: 10px;
	color: #1890ff;
}
.right-bottom {
	width: 100%;
	border: 1px solid #ebebeb;
	border-bottom: none;
}
.queryComponent-container {
	display: flex;
	align-items: flex-end;
}
.queryComponent {
	display: flex;
	align-items: center;
	margin-right: 15px;
}
.queryComponent span {
	color: #595959;
	font-size: 14px;
	margin-right: 5px;
}
.queryComponent > .component {
	flex: 1;
}
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 20px 60px 20px;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
</style>
